<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <LINK href="resourses/style.css" rel="stylesheet" type="text/css">
   <title>Mariachi Casa</title>
   <style>
      body {
         background-image:url('pictures/chipsAndSalsa.jpg');
		 background-repeat:no-repeat;
      }
   </style>
</head>


<!-- ------------------------------------------------------------------- -->
<script>
function sendRefill(item){
	/////send a note to the waiter that the item needs to be refilled
	alert("Your " + item + " will soon be delivered.");
	window.close();
}

function help(){
	alert("A waiter is on the way to help you.");
	/////send a note to the waiters that this tablet needs help
}
</script>
<!-- ------------------------------------------------------------------- -->


<body>
<!-- Back Button and Title -->
   	<div id="backButton">
      	<button class="backButton" onclick="window.close()">Back</button>
   	</div>
   

<!-- Left side of the screen, lists the drinks -->
   	<div id="refillScreen">
      		<h1>Refills</h1>
      		<div id="leftSideRefillScreen">
			<h2>Drinks</h2>
			<img src="pictures/cocaCola.jpg" onclick="sendRefill('Coca Cola')" ></br>
			<img src="pictures/dietCoke.jpg" onclick="sendRefill('Diet Coke')" ></br>
			<img src="pictures/sprite.jpg" onclick="sendRefill('Sprite')" ></br>
			<img src="pictures/drPepper.jpg" onclick="sendRefill('Dr Pepper')" ></br>
			<img src="pictures/hawaiianPunch.jpg" onclick="sendRefill('Hawaiian Punch')" ></br>
			<img src="pictures/sweetTea.jpg" onclick="sendRefill('Sweet Tea')" ></br>
			<button class="menuButton" onclick="sendRefill('Unsweet Tea')">Unsweet Tea</button>
		</div>
	

<!-- Right side of the screen, lists the other options -->  
		<div id="rightSideRefillScreen">
			<h2>Other</h2>
			<button class="menuButton" onclick="sendRefill('Chips')">Chips</button></br>
			<button class="menuButton" onclick="sendRefill('Salsa')">Salsa</button>
		</div>
   	</div>


<!-- Help and Refill buttons at the bottom. -->
   	<div id="pageBottom">
	<button class="footerButton" onclick="help()">Help</button>
	<button class="footerButton" onclick="window.close()">Close</button>
   	</div>
</body>
</html>